<template>
  <div class="hello">

<p>情况三：监听reactive定义的对象类型的复杂数据类型</p>
<h3>姓名：{{ person.name }}</h3>
<h3>年龄：{{ person.age }}</h3>
<h3>地址：{{ person.address.city }}</h3>
<h3>爱好：{{ person.hobbies }}</h3>
<button @click="modifyName">修改姓名</button>
<button @click="modifyAge">修改年龄</button>
<button @click="modifyPerson">修改整个人信息</button>
<hr>
<h3>测试数据:{{ obj.a.b.c }}</h3>
<button @click="changeObj">修改数据</button>




  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';
let person = reactive(
  {
  name:'张三',
  age: 20,
  address: {
    city: '北京',
  },
  hobbies: ['篮球', '足球', '乒乓球'],

}
)
let obj = reactive({
  a:{
    b:{
      c:1
    }
  }
})
// 方法
function modifyName() {
  person.name += '~'
}
function modifyAge() {
  person.age += 1;
}
function modifyPerson(){
  // person = {
  //   age: 99,
  //   name: '李四',
  //   address: {
  //     city: '上海',
  //   },
  //   hobbies: ['吃饭', '碎觉', '学习'],
  // }
  // reactive 定义的数据使用Object.assign来修改
  Object.assign(person, {
    age: 99,
    address: {
      city: '上海',
    },
    hobbies: ['吃饭', '碎觉', '学习'],
  })
}
// 测试
function changeObj(){
  obj.a.b.c = 222
}

// 监听
watch(person,(newVal, oldVal)=> {
  console.log('监听到数据变化：', newVal, oldVal)
})

// 测试
watch(obj,(newVal,oldVal) => {
  console.log('监听到obj变化：', newVal, oldVal)
})
// newVal, oldVal的变化有好几种，乙肝开发项目常用的是新的值
</script>

<style scoped>

</style>
